<template>
  <view class="comment-user" v-for="item in list" :key="item.id">
    <view class="u-flex-y-center">
      <u-image :src="prefixURL(item.user.avatar)" width="86rpx" height="86rpx" shape="circle"></u-image>
      <view class="u-m-l-16">
        <view class="u-flex-y-center">
          <u-text :text="item.user.nickname" margin="0 20rpx 0 0" color="#000" size="14" bold></u-text>
          <u-tag text="回复" @click="handleReply(item)" color="#F87610" size="mini" plain borderColor="#f87610"> </u-tag>
        </view>
        <u-text :text="item.createtime" color="#888" size="11"></u-text>
      </view>
    </view>
    <u-text :text="item.content" margin="20rpx 0" color="#000" size="13"></u-text>
    <block v-for="child in item.children" :key="item.id">
      <view class="u-flex-y-center u-m-l-70">
        <u-image :src="prefixURL(child.user.avatar)" width="72rpx" height="72rpx" shape="circle"></u-image>
        <view class="u-m-l-16">
          <view class="u-flex-y-center">
            <u-text :text="child.user.nickname" margin="0 20rpx 0 0" color="#000" size="14" bold></u-text>
            <u-tag text="回复" @click="handleReply(child)" color="#F87610" size="mini" plain borderColor="#f87610">
            </u-tag>
          </view>
          <u-text :text="child.createtime" color="#888" size="11"></u-text>
        </view>
      </view>
      <u-text :text="child.content" margin="20rpx 0 20rpx 70rpx " color="#000" size="13"></u-text>
    </block>
  </view>
  <view class="action-bar">
    <view class=" u-flex-y-center">
      <image src="@/static/images/01_46qsr.png" mode=""></image>
      <input type="text" :focus="focus" @blur="handleBlur" v-model="content" placeholder="添加评论..." class="u-flex-1" />
      <view class="send-btn" @click="_articleCreate">发布</view>
    </view>
  </view>
</template>

<script setup>
  import { prefixURL } from '../../../util/util';
  import { ref } from 'vue';
  import { articleCreate } from '../../../config/api';
  const emit = defineEmits(['reply_lst'])
  const props = defineProps({
    list: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ''
    }
  })
  const content = ref('')
  const pid = ref('')
  const focus = ref(false)
  const handleBlur = () => {
    focus.value = false
  }
  const _articleCreate = () => {
    articleCreate({ id: props.id, content: content.value, pid: pid.value }).then(res => {
      uni.$u.toast(res.msg)
      pid.value = ''
      content.value = ''
      emit('reply_lst')
    })
  }
  const handleReply = (item) => {
    pid.value = item.id
    focus.value = true
    console.log(pid.value)
  }
</script>

<style lang="scss" scoped>
  .comment-user {
    border-bottom: 1px solid #eee;
  }

  .comment-user+.comment-user {
    margin-top: 20rpx;
  }

  .action-bar {
    position: fixed;
    bottom: 0;
    left: 20rpx;
    right: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;

    >view {
      height: 80rpx;
      background: #F4F4F4;
      border-radius: 40rpx;

      padding: 8rpx 10rpx 8rpx 32rpx;
      font-size: 28rpx;
    }

    image {
      width: 28rpx;
      height: 28rpx;
      margin-right: 16rpx;
    }

    .send-btn {
      font-size: 28rpx;
      text-align: center;
      line-height: 64rpx;
      width: 116rpx;
      border-radius: 32rpx;
      background: #F87610;
      height: 64rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>